<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
</head>
<style>
  body{
    background-color: #e8e8e8;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  div{
    color: #475669;
  }
  .el-carousel__arrow{
    font-size: 30px;
    color: #475669;
    background-color: #e8e8e8;
  }
  .el-carousel__arrow:hover{
    color: aqua;
  }
  #sp1{
    color: #e8e8e8;
    position: relative;
    right: 50px;
    bottom: 15px;
  }
  a{
    width: 100px;
    height: 30px;
    display: block;
    background-color: #287dfa;
    margin-top: 40px;
    line-height: 30px;
    text-align: center;
    color: #e8e8e8;
    font-size: 16px;
    text-decoration: none;
    border-radius: 2px;
  }
  /*滚动宽度*/
  ::-webkit-scrollbar{
    width: 2px;
  }
  /*滚动条游标颜色*/
  ::-webkit-scrollbar-thumb{
    background-color: white;
  }
</style>
<body>
<div id="app" style="width: 1200px;margin: 0 auto">
  <el-container>
    <!--左边-->
    <el-aside width="800px">
      <h2 class="title1">高级双床房</h2>
          <template>
            <!--房间图片展示-->
            <el-carousel :interval="1000" arrow="always" :loop="false" :autoplay="false" indicator-position="none" height="450px">
              <el-carousel-item v-for="(item,index) in arr" style="background-color: #e8e8e8">
                <img :src="item" width="80%" height="100%" style="padding-left: 80px" alt="">
                <span id="sp1">{{index+1}}/{{arr.length}}</span>
              </el-carousel-item>
            </el-carousel>
          </template>
    </el-aside>
    <!--右边-->
    <el-main style="padding-top: 0">
      <div style="height: 450px;overflow: auto; overflow-x: hidden;">
        <h2 class="title1">基本信息</h2>
        <div class="info1">
          <div><i class="el-icon-house"> 30-40平方米</i></div>
          <div><i class="el-icon-printer"> 1张2米特大床 <br> 加床费用:350/床/间/晚</i></div>
          <div><i class="el-icon-school"> 1-2楼</i></div>
        </div>
        <div>
          <h2>全部设施</h2>
          <div v-for="item in foods">
            <h3>{{item.name}}</h3>
            <el-row>
              <el-col :span="12" v-for="f in item.content"><i class="el-icon-circle-check"> {{f}}</i></el-col>
            </el-row>
          </div>
        </div>
      </div>
      <div>
        <a href="">选择房间</a>
      </div>
    </el-main>
  </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function() {
      return {
        arr:["imgs/img.png","imgs/img_1.png","imgs/img_2.png","imgs/img_3.png"],
        foods:[{name:"洗漱用品",content:["牙刷","牙膏","沐浴露","洗发水","护发素"]},
          {name:"卫浴设施",content: ["浴缸","独立淋浴间","独立卫生间","智能马桶","吹风机"
              ,"浴室化妆放大镜","浴巾","24小时热水","拖鞋","卫生纸"]},
          {name:"客房设施",content: ["空调","（免费）","暖气","手动窗帘","自动窗帘","遮光窗帘",
              "特长睡床(超过两米)","床具:鸭绒被","床具:毯子或被子","备用床具","（免费）","开夜床"]}]
      }
    },
    methods:{

    }
  })
</script>
</html>